import "./index.less"
import { Space, Table, Tag, Input, Button, message, TablePaginationConfig, Popconfirm } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import { SearchOutlined, PlusOutlined } from '@ant-design/icons';
import { getLossCustomer, deleteLossCustomer } from "@/api/account"
import { useEffect, useRef, useState } from "react";
import systme from "@/api/constant"


let searchValue = {
    realName: '',
    pageIndex: 1,
    pageSize: 10
}

interface paramsType {
    id: string
    userName: string,
    account: string,
    address: string,
    person: personType
    password: string
    loginDate: string
}
interface personType {
    email: string
    phone: string
    realName: string
    sex: string
}
let customerId:string;




export default function loss() {


    //查询
    const handlerSearch = (e: any) => {

        searchValue.realName = e.target.value
    }
    const search = () => {
        initData()
    }
    //初始化
    const [data, setData] = useState<paramsType[]>([])
    useEffect(() => {
        initData()
    }, [])
    const initData = (params = searchValue) => {
        setLoading(true)
        getLossCustomer(params).then((res) => {
            setData(res.data.list)
            setLoading(false)
        }).catch(error => {
            message.error(systme.ERROR_MESSAGE)
            setLoading(false)
        })
    }
    const [loading, setLoading] = useState(true)
    const PageChange = (page: number, pageSize: number) => {
        searchValue.pageIndex = page
        searchValue.pageSize = pageSize
        setConfig({ ...saveValue.current, pageSize, current: page })
        initData()
    }

    let pageConfig: TablePaginationConfig = {
        position: ['bottomCenter'],
        total: 0,
        showTotal: (total: number) => `共 ${total} 条`,
        pageSizeOptions: [10, 20, 30, 40, 50],
        showSizeChanger: true,
        showQuickJumper: true,
        onChange: PageChange,
        pageSize: 10,
        current: 1

    }
    let [config, setConfig] = useState((pageConfig))
    let saveValue = useRef<TablePaginationConfig>()
    useEffect(() => {
        //储存数据
        saveValue.current = config
    }, [config])

    const columns: ColumnsType<paramsType> = [
        {
            title: '联系人姓名',
            dataIndex: 'realName',
            key: 'realName',
            render: (_, record: paramsType) => (
                <Space size="middle">
                    <div>
                        {record.person&&record.person.realName}
                    </div>
                </Space>
            )
        },
        {
            title: '联系人邮箱',
            dataIndex: 'email',
            key: 'email',
            render: (_, record: paramsType) => (
                <Space size="middle">
                    <div>
                        {record.person&&record.person.email}
                    </div>
                </Space>
            )
        },

        {
            title: '联系人手机号',
            dataIndex: 'phone',
            key: 'phone',
            render: (_, record: paramsType) => (
                <Space size="middle">
                    <div>
                        {record.person&&record.person.phone}
                    </div>
                </Space>
            )
        },
        {
            title: '联系人客户名',
            dataIndex: 'userName',
            key: 'userName',
        },
        {
            title: '最后登录日期',
            key: 'loginDate',
            render: (_, record: paramsType) => (
                <Space size="middle">
                    <div>
                        {record.loginDate.slice(0, 10)}
                    </div>
                </Space>
            )


        },
        {
            title: '操作',
            key: 'action',
            render: (_, record: paramsType) => (
                <Space size="middle"  key={record.id}>
                    <Popconfirm
                        title="提示"
                        description="是否删除该用户？"
                        onConfirm={confirm}
                        okButtonProps={{ loading: confirmLoading }}
                        onCancel={cancel}
                       
                    >
                        <a style={{ color: 'red' }} onClick={()=>{handlerDelete(record)}}  >删除</a>
                    </Popconfirm>
                </Space>
            ),
        },
    ];
    const [open,setOpen] =useState<boolean>(false)
    const [confirmLoading, setConfirmLoading] = useState(false);
    const handlerDelete = (data:paramsType) => {
        setOpen(true)
        customerId = data.id
    }
    const confirm = () => {
        setConfirmLoading(true)
        deleteLossCustomer({id:customerId}).then((res)=>{
            if(res.code == 200){
                message.success("删除成功")
                setConfirmLoading(false)
                initData()
                setOpen(false)
            }else{
                message.error("删除失败")
                setOpen(false)
            }
        }).catch(error =>{
            message.error(systme.ERROR_MESSAGE)
            setOpen(false)
        })
    }
    const cancel = () => {
        message.info("取消了删除操作")
        setOpen(false)
    }
    return (
        <div className="box_views">
            <div className="header flex">
                <div className="header_search flex">
                    <div className="item">
                        <Input placeholder="请输入联系人姓名" allowClear onChange={(e: unknown) => { handlerSearch(e) }} />
                    </div>
                    <Button type="primary" icon={<SearchOutlined />} size="middle" onClick={search}>查询</Button>
                </div>
            </div>
            <Table columns={columns} dataSource={data} pagination={config} rowKey={item => item.id} loading={loading} />
        </div>
    )
}